<template>
  <el-dialog
      :title="id?'修改用户':'新增用户'"
      :visible.sync='show'
      width='25%'
      :before-close='handleBeforeClose'>
    <el-form
        :model='userForm'
        ref='userForm'
        :rules='userRules'
        label-width='130px'
        size='medium'>
      <el-form-item label='用户名称' prop='username'>
        <el-input v-model="userForm.username" placeholder="请输入用户名称"/>
      </el-form-item>
      <el-form-item label='是否有效' prop='status'>
        <el-radio-group v-model="userForm.status">
          <el-radio
              v-for='(item, index) in statusEnum'
              :key='index'
              :label="item.label">
            {{ item.value }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label='备注' prop='remark'>
        <el-input type="textarea" v-model="userForm.remark"/>
      </el-form-item>
    </el-form>
    <div class='footer'>
      <el-button size='medium' type='primary' @click='handleBeforeClose'>取消</el-button>
      <el-button size='medium' type='success' @click='handlerSubmitForm'>保存</el-button>
    </div>
  </el-dialog>
</template>

<script>

import SystemApi from '@/apis/system/SystemApi'
import UserApi from '@/apis/system/UserApi'
import { statusEnum } from '@/enums/CommonEnum'

export default {
  name: 'UserDialog',
  props: {
    show: {
      type: Boolean,
      require: false,
      default: false
    },
    id: {
      type: Number,
      required: false
    },
  },
  data () {
    return {
      statusEnum: statusEnum,
      userForm: {
        username: null,
        headUserName: null,
        leader: null,
        status: 0,
        remark: null,
      },
      userRules: {
        username: {
          required: true, message: '用户名不能为空', trigger: 'blur'
        },
        status: {
          required: true
        },
      }
    }
  },
  computed: {
    size () {
      return this.$store.getters['ElementUI/getSize']
    },
  },
  mounted () {
    // this.handlerSelectUserList()
  },
  watch: {
    id (newVal) {
      if (newVal) {
        this.handlerSelectById(this.id)
      }
    },
  },
  methods: {
    async handlerSelectById (id) {
      const res = await UserApi.selectById(id)
      if (res.code === '0') {
        this.userForm = res.data
      } else {
        this.$message.error(res.messsage)
      }
    },
    handleBeforeClose () {
      this.$refs.userForm.resetFields()
      this.$emit('close')
    },
    handlerSubmitForm () {
      this.$refs.userForm.validate((valid) => {
        if (!valid) {
          setTimeout(() => {
            const isError = document.getElementsByClassName('is-error')
            isError[0].querySelector('input').focus()
          }, 100)
          return false
        }

        if (this.id) {
          this.handlerUpdate()
        } else {
          this.handlerCreate()
        }
      })
    },
    async handlerCreate () {
      const res = await UserApi.create(this.userForm)
      if (res.code === '0') {
        this.$emit('close')
      } else {
        this.$message.error(res.messsage)
      }
    },
    async handlerUpdate () {
      const res = await UserApi.update(this.userForm)
      if (res.code === '0') {
        this.$emit('close')
      } else {
        this.$message.error(res.messsage)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.el-dialog {
  .footer {
    text-align: center;
  }

  .el-select {
    width: 100%;
  }
}
</style>
